<template>
  <Header title="注册账号" />
  <div class="my_content">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm"
      label-width="60px"
      label-position="top"
    >
      <el-form-item prop="userName" label="用户名：">
        <el-input
          v-model.trim="ruleForm.userName"
          type="text"
          autocomplete="off"
          placeholder="请输入用户名"
          size="large"
        />
      </el-form-item>
      <el-form-item prop="password" label="密码：">
        <el-input
          v-model.trim="ruleForm.password"
          type="password"
          autocomplete="off"
          placeholder="请输入密码"
          maxlength="12"
          size="large"
        />
      </el-form-item>
      <el-form-item prop="email" label="邮箱：">
        <el-input
          v-model.trim="ruleForm.email"
          type="text"
          autocomplete="off"
          placeholder="请输入邮箱地址"
          maxlength="32"
          size="large"
        />
      </el-form-item>
      <el-form-item prop="mobile" label="手机号：">
        <el-input
          v-model.trim="ruleForm.mobile"
          type="text"
          autocomplete="off"
          placeholder="请输入手机号"
          maxlength="11"
          size="large"
        />
      </el-form-item>
    </el-form>
  </div>
  <el-button
    class="footerBtn"
    type="primary"
    @click="submitForm(ruleFormRef)"
    :loading="loginLoading"
    size="large"
    >立即注册</el-button
  >
</template>

<script lang="ts" setup>
import Header from "@/components/Header.vue"
import { reactive, ref } from "vue"
import { ElMessage } from "element-plus"
import type { FormInstance } from "element-plus"
import { appRegister } from "@/api/index"
import { useRouter } from "vue-router"

const $router = useRouter()
const loginLoading = ref(false)

const ruleFormRef = ref<FormInstance>()

const validateUserName = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入用户名称!"))
  } else {
    callback()
  }
}
const validatePassword = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入新密码"))
  } else if (value.length < 6) {
    callback(new Error("请输入8至12位的新密码"))
  } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/.test(value)) {
    callback(new Error("请输入8至12位包含数字、字母（大小写）密码"))
  } else {
    callback()
  }
}
const validateEmail = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入电子邮箱地址!"))
  } else if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
    callback(new Error("请输入正确的邮箱格式!"))
  } else {
    callback()
  }
}
const validatePhone = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入电话号码!"))
  } else if (
    !/^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/.test(
      value
    )
  ) {
    callback(new Error("请输入正确的手机号格式!"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  userName: "",
  password: "",
  email: "",
  mobile: ""
})

const rules = reactive({
  userName: [{ validator: validateUserName, trigger: "blur" }],
  password: [{ validator: validatePassword, trigger: "blur" }],
  email: [{ validator: validateEmail, trigger: "blur" }],
  mobile: [{ validator: validatePhone, trigger: "blur" }]
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const res = await appRegister({
        email: ruleForm.email,
        mobile: ruleForm.mobile,
        password: ruleForm.password,
        username: ruleForm.userName
      })
      if (res.code === 200) {
        ElMessage.success("注册成功！")
      } else {
        ElMessage.error(res.msg)
      }
    } else {
      return false
    }
  })
}

const loginOut = () => {
  sessionStorage.clear()
  $router.push({ path: "/login" })
}
</script>
<style scoped lang="less">
@import "../styles/common.less";

:deep(.el-form-item__content) {
  margin-bottom: 30px;
}
</style>
